草庐IT

前端 PM

全部标签

前端Vue组件之仿京东拼多多领取优惠券弹出框popup 可用于电商商品详情领券场景使用

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。 前端的组件化,其实是对项目进行自上而下的拆分,把通用的、可复用的功能以黑盒

前端页面加载缓慢的原因和性能优化问题

一、页面加载缓慢的原因有哪些1、过多的http请求2、占时间占用js线程3、页面回流和重绘比较多4、资源加载堵塞5、内容泄露导致内存过大6、操作dom节点或者事件过多二、前端性能优化方法有哪些1,减少http请求(图片尽量使用雪碧图、Base64、字体图标库,减少重定向,使用缓存,不使用css@import,避免使用空的src和href)2、资源压缩与合并(css压缩、js压缩,文件合并等)3、优化网络连接(使用cdn,dns解析,使用keep-alive建立连接)4、优化资源加载,代码拆分,按需加载,降低css对渲染的阻塞,尽早加载css降低加载的大小5、减少重绘或者回流6、webpack性

web前端 品优购首页+源代码(1)

首页构成shortcut快捷导航模块header头部模块nav导航模块footer底部模块(优先做页面公共模块)快捷导航模块 品优购欢迎您!  请登录 免费注册 我的订单 我的品优购 品优购会员 企业采购 关注品优购 客户服务 网站导航 css代码:/*版心*/.w{ width:1200px; margin:0auto;}.

前端技术搭建五子棋游戏(内含源码)

Thesandaccumulatestoformapagoda✨写在前面✨功能介绍✨页面搭建✨样式设置✨逻辑部分✨写在前面上周我们实通过前端基础实现了拼图游戏,今天还是继续按照我们原定的节奏来带领大家完成一个五子棋游戏,功能也比较简单简单,也是想借助这样一个简单的功能,然后来帮助大家了解我们JavaScript在前端中的作用,在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程,这份专栏中我们会带领大家用前端实现翻卡片、飞机大战、弹珠游戏、贪吃蛇、井字游戏、拼图、连连看、扫雷等等有趣的小游戏,纯前端语言实现,都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。订阅链接

node.js 前端直接分片上传文件与阿里云OSS的方法

解决问题:直接由用户上传文件至阿里云OSS,而非经过中间件/后端官方文档:分片上传(aliyun.com)​​​​​​​​​​​在官方文档中,提供的方法是由中间件上传至oss,调用了path库,但是在浏览器用户没有那么大的权限,我们关注到文档中此表:类型参数说明必选参数name{String}Object完整路径,Object完整路径中不能包含Bucket名称。file{String|File}表示文件路径或者HTML5文件。在必选参数中除了提供path,还可以提供HTML5文件,也就是我们常说的file。给出如下解决:constOSS=require('ali-oss');constpath

前端引入外部 js文件

方法一:script标签在中使用script标签引入。head>scripttype="text/javascript"src="链接">script>head>这是最简单的方法,这种方法在项目加载时就会引入,但有时候需要在不同环境下判断是否需要引入,比如微信中引入,钉钉中不引入等。所以还需要用其它方法来引入。方法二:手动创建标签使用js创建script标签去引入。可以在引入前添加判断条件,来决定是否要引入。创建一个js文件,专门用来写这类内容。link.jsexportfunctionimportLink(){constlink=document.createElement('script'

【Debug】前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.

报错如下:原因分析:最新版本的Vue3对语法检测更加严格,之前我们可以通过v-model进行双向绑定,但是现在会报上面的错误;解决办法:v-model="show"改写成:modelValue="show"就可以了.

前端视频加水印

前端视频加水印借助video.js插件,npm地址:https://www.npmjs.com/package/video.js方案一:图片背景图importvideojsfrom'video.js';import'video.js/dist/video-js.css'mounted(){ this.$nextTick(function(){ varplayer=videojs(this.$refs.videoPlayer); });}/*vjs-text-track-display是video.js使用之后插入的dom的class,这个div是定位铺在视频上方的,给它设置背景图,即可实现视频

前端实现base64编码处理

文件上传时,因为base64文件字符串过长后端接收失败的问题。文章目录前言一、base64编码是什么?二、实现步骤1.将要上传的文件读入到内存中,并使用FileReader将其转换成Base64编码的字符串:2.对Base64编码的字符串进行分块处理。因为在上传大文件时,将整个文件的Base64编码作为一个字符串直接上传可能会导致浏览器崩溃或上传失败。因此,我们需要将Base64编码的字符串分成多个较小的块进行上传3.上传分块数据。我们可以使用axios或其他HTTP库来上传数据。在上传每个块时,我们需要将其放入FormData中,并将其作为HTTP请求的body部分进行上传。4.上传完成后,

《前端与SEO》—— 第一章:什么是 SEO

基础概念SEO是SearchEngineOptimization的缩写,翻译过来就是搜索引擎优化。我们对搜索引擎搜并不陌生,日常遇到不懂的东西,都会说“百度一下”、“Google一下”。百度、Google之类的网站就是搜索引擎网站,其内核就是搜索引擎。搜索引擎会不断的去搜集网络上的信息、网站进行分析整理,然后在用户查询时展示给用户看。那搜索引擎优化就是对搜索引擎进行优化吗?显然不是的。搜索引擎优化指的是——优化网站,让网站能更快、更好的被搜索引擎收录且尽可能让搜索引擎优先展示网站,从而增加网站的访问量。为什么会有SEO?其实SEO是搜索引擎的伴生物,是服务于搜素引擎的。所以想要了解SEO,就需